/**
 * SCSS混合宏(Mixins)文件
 * 混合宏是可重用的样式片段，可以在整个项目中使用
 * 使用方法：@include 混合宏名称(参数);
 */

/**
 * 清除浮动
 * 用于清除子元素的浮动，防止父元素高度塌陷
 * 使用方法：@include clearfix;
 */
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

/**
 * 单行文本溢出省略
 * 当文本超出容器宽度时，显示省略号
 * 使用方法：@include ellipsis;
 */
@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/**
 * 多行文本溢出省略
 * 当文本超过指定行数时，显示省略号
 * @param {Number} $lines - 显示的行数
 * 使用方法：@include multi-ellipsis(2);
 */
@mixin multi-ellipsis($lines) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * 绝对定位居中
 * 使元素在父容器中水平垂直居中
 * 注意：父元素需要设置position: relative;
 * 使用方法：@include absolute-center;
 */
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/**
 * 水平方向绝对定位居中
 * 使元素在父容器中水平居中
 * 注意：父元素需要设置position: relative;
 * 使用方法：@include absolute-center-x;
 */
@mixin absolute-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/**
 * 垂直方向绝对定位居中
 * 使元素在父容器中垂直居中
 * 注意：父元素需要设置position: relative;
 * 使用方法：@include absolute-center-y;
 */
@mixin absolute-center-y {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/**
 * flex布局居中
 * 使用flex布局使元素在父容器中水平垂直居中
 * 使用方法：@include flex-center;
 */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/**
 * flex布局水平居中
 * 使用flex布局使元素在父容器中水平居中
 * 使用方法：@include flex-center-x;
 */
@mixin flex-center-x {
  display: flex;
  justify-content: center;
}

/**
 * flex布局垂直居中
 * 使用flex布局使元素在父容器中垂直居中
 * 使用方法：@include flex-center-y;
 */
@mixin flex-center-y {
  display: flex;
  align-items: center;
}

/**
 * 设置宽高
 * 同时设置元素的宽度和高度
 * @param {Length} $width - 宽度值
 * @param {Length} $height - 高度值，默认等于宽度
 * 使用方法：@include size(100px); 或 @include size(100px, 50px);
 */
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

/**
 * 设置正方形
 * 创建一个宽高相等的正方形元素
 * @param {Length} $size - 正方形的边长
 * 使用方法：@include square(100px);
 */
@mixin square($size) {
  @include size($size);
}

/**
 * 设置圆形
 * 创建一个圆形元素
 * @param {Length} $size - 圆的直径
 * 使用方法：@include circle(100px);
 */
@mixin circle($size) {
  @include square($size);
  border-radius: 50%;
}

/**
 * 设置字体
 * 一次性设置字体的多个属性
 * @param {Length} $size - 字体大小
 * @param {String} $weight - 字体粗细，默认normal
 * @param {Color} $color - 字体颜色，默认继承
 * @param {Number} $line-height - 行高，默认normal
 * 使用方法：@include font(16px, bold, #333, 1.5);
 */
@mixin font($size, $weight: normal, $color: inherit, $line-height: normal) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
  line-height: $line-height;
}

/**
 * 设置边框
 * 一次性设置元素的四边边框
 * @param {Length} $width - 边框宽度，默认1px
 * @param {String} $style - 边框样式，默认solid
 * @param {Color} $color - 边框颜色，默认使用变量$border-color
 * 使用方法：@include border(2px, dashed, #ccc);
 */
@mixin border($width: 1px, $style: solid, $color: $border-color) {
  border: $width $style $color;
}

/**
 * 设置上边框
 * 设置元素的上边框
 * @param {Length} $width - 边框宽度，默认1px
 * @param {String} $style - 边框样式，默认solid
 * @param {Color} $color - 边框颜色，默认使用变量$border-color
 * 使用方法：@include border-top(2px, dashed, #ccc);
 */
@mixin border-top($width: 1px, $style: solid, $color: $border-color) {
  border-top: $width $style $color;
}

/**
 * 设置右边框
 * 设置元素的右边框
 * @param {Length} $width - 边框宽度，默认1px
 * @param {String} $style - 边框样式，默认solid
 * @param {Color} $color - 边框颜色，默认使用变量$border-color
 * 使用方法：@include border-right(2px, dashed, #ccc);
 */
@mixin border-right($width: 1px, $style: solid, $color: $border-color) {
  border-right: $width $style $color;
}

/**
 * 设置下边框
 * 设置元素的下边框
 * @param {Length} $width - 边框宽度，默认1px
 * @param {String} $style - 边框样式，默认solid
 * @param {Color} $color - 边框颜色，默认使用变量$border-color
 * 使用方法：@include border-bottom(2px, dashed, #ccc);
 */
@mixin border-bottom($width: 1px, $style: solid, $color: $border-color) {
  border-bottom: $width $style $color;
}

/**
 * 设置左边框
 * 设置元素的左边框
 * @param {Length} $width - 边框宽度，默认1px
 * @param {String} $style - 边框样式，默认solid
 * @param {Color} $color - 边框颜色，默认使用变量$border-color
 * 使用方法：@include border-left(2px, dashed, #ccc);
 */
@mixin border-left($width: 1px, $style: solid, $color: $border-color) {
  border-left: $width $style $color;
}

/**
 * 设置阴影
 * 为元素添加阴影效果
 * @param {Shadow} $shadow - 阴影值，默认使用变量$box-shadow-normal
 * 使用方法：@include box-shadow(0 2px 4px rgba(0,0,0,0.1));
 */
@mixin box-shadow($shadow: $box-shadow-normal) {
  box-shadow: $shadow;
}

/**
 * 设置过渡
 * 为元素添加过渡效果
 * @param {String} $property - 过渡属性，默认all
 * @param {Time} $duration - 过渡时间，默认使用变量$animation-duration-normal
 * @param {String} $timing-function - 过渡函数，默认ease
 * @param {Time} $delay - 过渡延迟时间，默认0s
 * 使用方法：@include transition(opacity, 0.3s, ease-in-out);
 */
@mixin transition($property: all, $duration: $animation-duration-normal, $timing-function: ease, $delay: 0s) {
  transition: $property $duration $timing-function $delay;
}

/**
 * 设置动画
 * 为元素添加动画效果
 * @param {String} $name - 动画名称
 * @param {Time} $duration - 动画时间，默认使用变量$animation-duration-normal
 * @param {String} $timing-function - 动画函数，默认ease
 * @param {Time} $delay - 动画延迟时间，默认0s
 * @param {Number} $iteration-count - 动画重复次数，默认1
 * @param {String} $direction - 动画方向，默认normal
 * @param {String} $fill-mode - 动画填充模式，默认none
 * 使用方法：@include animation(fade, 0.5s, ease-in-out, 0s, infinite);
 */
@mixin animation($name, $duration: $animation-duration-normal, $timing-function: ease, $delay: 0s, $iteration-count: 1, $direction: normal, $fill-mode: none) {
  animation: $name $duration $timing-function $delay $iteration-count $direction $fill-mode;
}

/**
 * 设置响应式
 * 根据不同的屏幕尺寸应用不同的样式
 * @param {String} $breakpoint - 断点名称：xs, sm, md, lg, xl
 * 使用方法：
 * @include respond-to('md') {
 *   font-size: 16px;
 * }
 */
@mixin respond-to($breakpoint) {
  @if $breakpoint == 'xs' {
    @media (max-width: 575px) { @content; } // 超小屏幕，如手机竖屏
  } @else if $breakpoint == 'sm' {
    @media (min-width: 576px) and (max-width: 767px) { @content; } // 小屏幕，如手机横屏
  } @else if $breakpoint == 'md' {
    @media (min-width: 768px) and (max-width: 991px) { @content; } // 中等屏幕，如平板
  } @else if $breakpoint == 'lg' {
    @media (min-width: 992px) and (max-width: 1199px) { @content; } // 大屏幕，如桌面显示器
  } @else if $breakpoint == 'xl' {
    @media (min-width: 1200px) { @content; } // 超大屏幕，如大型显示器
  }
}

/**
 * 1px边框
 * 解决移动端1px边框在高清屏下显示过粗的问题
 * @param {String} $position - 边框位置：top, right, bottom, left, all
 * @param {Color} $color - 边框颜色，默认使用变量$border-color
 * 使用方法：@include hairline(bottom, #ccc);
 */
@mixin hairline($position: bottom, $color: $border-color) {
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    pointer-events: none; // 避免影响元素的点击事件
    box-sizing: border-box;
    
    @if $position == 'top' {
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid $color;
      transform-origin: 0 0; // 变换原点设置为顶部
    } @else if $position == 'right' {
      top: 0;
      right: 0;
      bottom: 0;
      width: 1px;
      border-right: 1px solid $color;
      transform-origin: 100% 0; // 变换原点设置为右侧
    } @else if $position == 'bottom' {
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      border-bottom: 1px solid $color;
      transform-origin: 0 100%; // 变换原点设置为底部
    } @else if $position == 'left' {
      top: 0;
      left: 0;
      bottom: 0;
      width: 1px;
      border-left: 1px solid $color;
      transform-origin: 0 0; // 变换原点设置为左侧
    } @else if $position == 'all' {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 1px solid $color;
      transform-origin: 0 0; // 变换原点设置为左上角
    }
    
    // 2倍屏下缩放为0.5
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      transform: scaleY(0.5);
    }
    
    // 3倍屏下缩放为0.33
    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
      transform: scaleY(0.33);
    }
  }
} 